<!--
 * @Description: 食谱表单页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-09 17:42:26
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-07 18:08:09
 -->
<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增食谱' : '编辑食谱'" width="600px">
    <el-form ref="form" :model="form" size="small" label-width="80px">
      <el-form-item label="食谱名称">
        <el-input v-model="form.name" style="width:65%" />
      </el-form-item>
      <el-form-item label="食谱天数">
        <el-input-number v-model="form.service_day" style="width:65%" />
      </el-form-item>
      <el-form-item label="食谱热量">
        <el-input-number v-model="form.energy" style="width:65%" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0" active-text="启用" inactive-text="禁用" />
      </el-form-item>
      <el-form-item v-if="isAdd" label="食谱文件">
        <div class="input-group">
          <div class="input-group-box">
            <div class="el-upload el-upload--text">
              <div class="el-upload-dragger">
                <i class="el-icon-upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </div>
              <input id="files" type="file" name="file_name" @change="getFileInfo($event)">
            </div>
          </div>
        </div>
        <div class="input-group">
          <label />
          <div class="input-group-box">
            <div v-if="form.recipe" v-html="form.recipe.name" /> 
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      form: {
        id: '',
        name: '',
        service_day: '',
        energy: '',
        status: '1',
        recipe: ''
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.loading = true
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    doAdd() {
      const param = new FormData() //创建form对象
      for (const key in this.form) {
        param.append(key, this.form[key]) //通过append向form对象添加数据
      }

      this.$api.resource.recipe
        .add({
          data: param,
          headers: { 'Content-Type': 'multipart/form-data' }
        }).then(res => {
          this.resetForm()
          this.$notify({ title: '添加成功', type: 'success', duration: 2500 })
          this.loading = false
          this.$parent.$parent.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    },
    doEdit() {
      this.$api.resource.recipe
        .edit({
          data: this.form
        }).then(res => {
          this.resetForm()
          this.$notify({ title: '修改成功', type: 'success', duration: 2500 })
          this.loading = false
          this.sup_this.init()
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        name: '',
        value: '',
        description: ''
      }
    },
    getFileInfo(event) {
      this.form.recipe = event.target.files[0]
      var filename = event.target.files[0].name
      var fileArry = filename.split('.')
      var fileLen = fileArry.length
      var suffix = fileArry[fileLen - 1]
      if (suffix === 'csv' || suffix === 'xls' || suffix === 'xlsx' || suffix === 'xlsm') {
        return false
      } else {
        this.$notify({ title: '错误', message: '上传的文档不合格', type: 'error', duration: 1500 })
      }
    }
  }
}
</script>

<style scoped>
#files {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  display: block !important;
}
</style>
